<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <link rel="stylesheet" href="static/css/article.css">

</head>
<body>

<p style="display:none " id="articleId" data="{{.}}"></p>

    <div class="container">
        <h1 class="p1"></h1>
        <div class="meta-info">
            <span class="p4"></span>
            <span class="p2"></span>
        </div>
        <div class="content">
            <p class="p3"></p>
        </div>

        <div class="comments">
            <h2>评论区</h2>
            <form id="comment-form">
                <textarea id="comment-input" placeholder="发表评论"
                          style="resize: none;width: 98%;height: 90px;"></textarea>
                <button type="submit">发表</button>
            </form>
            <div id="comment-list">

            </div>
        </div>
    </div>


</body>

<script>
    $(document).ready(function (){
        allRemark()  // 评论区 内容
      getArticle()  // 文章 内容

        // 点击回复 后判断是否 登录，并且弹出回复框
        $('body').on('click','.rep',function (event) {

            $.ajax({
                url:"/remark/rep",
                type:"get",
                data:{

                },
                dataType:"json",
                success:function (data) {

                    if (data.data === "请先登录!"){
                        if (confirm("登录后才能回复评论，是否要去登录")){
                            window.location.href = "/login"
                        }else{
                            document.getElementById('comment-input').value = ""
                        }
                    }else{     // 此时已经登录

                        var fu = event.target.parentNode
                        const pTag1 = document.createElement("textarea");  // 回复框
                        pTag1.className = "Reply-content";

                        const pTag2 = document.createElement("button");
                        pTag2.className = "Reply-Button";
                        pTag2.textContent = "评论"
                        fu.appendChild(pTag1)
                        fu.appendChild(pTag2)

                        //  下面这个是 收回 回复框  TODO 点击其他位置 能够收起回复框 需要完整该功能
                        // var replyButton = document.querySelector('.rep');
                        // replyButton.addEventListener('click', function(event) {
                        //     event.stopPropagation();
                        // });
                        // var rootElement = document.documentElement;
                        // rootElement.addEventListener('click', function() {
                        //     var replyContent = document.querySelector('.Reply-content');
                        //     var replyButton = document.querySelector('.Reply-Button');
                        //     replyContent.style.display = 'none';
                        //     replyButton.style.display = 'none';
                        // });
                        // var replyContainer = document.querySelector('.OneRemark');
                        // replyContainer.addEventListener('click', function(event) {
                        //     event.stopPropagation();
                        // });

                    }
                },
                error:function () {
                    console.log("返回了错误!")
                }
            })

        });

        //  点击回复评论按钮
        $('body').on('click','.Reply-Button',function (event) {

            var master = this.parentNode.querySelector(".user_id").textContent  // 楼主 名字
            var content = this.parentNode.querySelector(".Reply-content")  // 回复内容
            var id = this.parentNode.getAttribute("data")  // 文章id

            $.ajax({
                url:"/remark/rep",
                type:"post",
                data:{
                    "remark_id" : id,
                    "master_name": master,
                    "reply_content" : content.value,
                },
                success:function () {
                    alert("回复成功！")
                    content.value = ""  // TODO 用户 回复 评论后，页面刷新 后期要 优化成 加载
                    document.getElementById("comment-list").innerHTML = ""
                    allRemark()
                }

            })
        })



    })


    // 遍历文章内容
    function getArticle(){
        $.ajax({
            url:"/article_data",
            type:"get",
            data:{
                id:$("#articleId").attr("data"),
            },
            dataType:"json",
            success:function (data) {
                $(".p1").text(data.art.title)
                $(".p2").text(data.art.type)
                $(".p3").text(data.art.content)
                $(".p4").text("最后一次更新时间:" + data.art.update_time)
            },
            error:function () {
                alert("数据加载失败!")
            },
        })
    }

    // 这里是 点击发布评论
    document.getElementById('comment-form').addEventListener('submit', function (event) {
        event.preventDefault(); // 阻止表单提交刷新页面的默认行为
        $.ajax({
            url: "/remark/add",
            type: "post",
            dataType:"json",
            data: {
                "art_id":$("#articleId").attr("data"),
                "content" : $("#comment-input").val(),
            },
            success:function (data) {
                if (data.data === "请先登录!"){
                    if (confirm("登录后才能评论，是否要去登录")){
                        window.location.href = "/login"
                    }else{
                        document.getElementById('comment-input').value = ""
                    }
                }else {
                    document.getElementById('comment-input').value = ""
                    //TODO 这里需要完善 每评论一次 就要下载，而不是刷新
                    document.getElementById('comment-list').innerHTML = ""  // 清空评论区内容
                    allRemark()  // 加载评论区内容
                }

            },
            error:function () {
                alert("评论失败!")
            }

        })
    })
    
    // 遍历 评论区数据 , 加载评论区的内容
    function allRemark() {
        $.ajax({
            url:"/remark/find",
            type:"post",
            dataType:"json",
            data:{
                art_id : $("#articleId").attr("data"),
            },
            success:function (data) {
                const commentDiv = document.getElementById('comment-list'); // 获取 评论区的 div

                //  这是加载 楼主层 的回复
                for (const rem of data.rem){
                    const aTag = document.createElement("div");
                    aTag.className = "OneRemark";
                    aTag.setAttribute("data", rem.id);

                    const pTagg = document.createElement("p");
                    pTagg.className = "";

                    const pTag1 = document.createElement("span");
                    pTag1.className = "user_id";
                    pTag1.textContent = rem.name;

                    const pTag3 = document.createElement("span");
                    pTag3.className = "create_time";
                    pTag3.textContent = rem.create_time;

                    pTagg.appendChild(pTag1)
                    pTagg.appendChild(pTag3)

                    const pTag2 = document.createElement("p");
                    pTag2.className = "rem_content";
                    pTag2.textContent = rem.content;

                    const aTag1 = document.createElement("a");
                    aTag1.className = "rep";
                    aTag1.textContent = "回复";

                    aTag.appendChild(pTagg);
                    aTag.appendChild(pTag2);
                    aTag.appendChild(aTag1)
                    commentDiv.appendChild(aTag)

                    //  这是加载 回复的 内容  TODO 这里是  加载回复的内容 ， 但是 被回复的 不能再次回复了，优化这里
                    for (var rem1 of data.rems){
                        if (rem1.remark_id === rem.id){

                            var aTag11 = document.createElement("div");
                            aTag11.className = "OneRemark";
                            aTag11.setAttribute("data", rem1.id);

                            var pTag11 = document.createElement("p");
                            pTag11.className = "";

                            var pTag22 = document.createElement("span"); //用户
                            pTag22.className = "content";
                            pTag22.textContent = rem1.user_name;

                            const pTag33 = document.createElement("span");  // 回复了
                            pTag33.className = "create_time";
                            pTag33.textContent = "  回复了  ";

                            const pTag66 = document.createElement("span");  // 楼主
                            pTag66.className = "create_time";
                            pTag66.textContent = rem1.master_name;

                            const pTag55 = document.createElement("span");  // 时间
                            pTag55.className = "create_time";
                            pTag55.textContent = rem1.create_time;

                            pTag11.appendChild(pTag22)
                            pTag11.appendChild(pTag33)
                            pTag11.appendChild(pTag66)
                            pTag11.appendChild(pTag55)


                            const pTag7 = document.createElement("p");
                            pTag7.className = "create_time";
                            pTag7.textContent = rem1.reply_content;

                            // const aTag1 = document.createElement("a");
                            // aTag1.className = "rep";
                            // aTag1.textContent = "回复";

                            aTag11.appendChild(pTag11);
                            aTag11.appendChild(pTag7);
                            // aTag.appendChild(aTag1)
                            commentDiv.appendChild(aTag11)
                        }

                    }



                }


            },
            error:function () {
                alert("评论区数据加载失败!")
            },

        })
    }





</script>

</html>